﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 :: Pruebas del arcTo</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <style type="text/css">
            body {
                font-family: Verdana, Helvetica, sans-serif;
                font-size: 12px;
            }

            input[type="text"] {
                width: 40px;
            }

            div.container {
                width: 1000px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div>
                Punto Inicial:
                <input type="text" id="p0x" />
                <input type="text" id="p0y" />
            </div>

            <div>
                Punto 1:
                <input type="text" id="p1x" />
                <input type="text" id="p1y" />
            </div>

            <div>
                Punto 2:
                <input type="text" id="p2x" />
                <input type="text" id="p2y" />
            </div>

            <div>
                Radio:
                <input type="text" id="radio" />
                <button type="button" onclick="javascript: dibujar()">Calcular</button>
            </div>

            <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
                your browser does not support the canvas tag </canvas>
            <script type="text/javascript">
                var canvasWidth = 800;
                var canvasHeight = 600;
			
                function dibujar() {
                    // Obtención de los puntos utilizados...
                    var p0 = {x:parseInt($('#p0x').val()), y:$('#p0y').val()};
                    var p1 = {x:parseInt($('#p1x').val()), y:parseInt($('#p1y').val())};
                    var p2 = {x:parseInt($('#p2x').val()), y:parseInt($('#p2y').val())};
                    var radio = parseInt($('#radio').val());

                    // Se obtiene el contexto 2D del canvas...
                    var c=document.getElementById("myCanvas");
                    var ctx=c.getContext("2d");
                    ctx.clearRect (0, 0, canvasWidth, canvasHeight);

                    // Se dibujan los puntos con las líneas en negro...
                    ctx.beginPath();
                    ctx.strokeStyle="#000000";
                    ctx.lineWidth=1;
                    ctx.arc(p0.x,p0.y,3,0*Math.PI,2*Math.PI);
                    ctx.moveTo(p0.x,p0.y);
                    ctx.lineTo(p1.x,p1.y);
                    ctx.arc(p1.x,p1.y,3,0*Math.PI,2*Math.PI);
                    ctx.moveTo(p1.x,p1.y);
                    ctx.lineTo(p2.x,p2.y);
                    ctx.arc(p2.x,p2.y,3,0*Math.PI,2*Math.PI);
                    ctx.stroke();
					
                    ctx.font="10px Arial";
                    ctx.fillStyle = "#000";
                    ctx.fillText("Inicio", p0.x + 5, p0.y, 20);
                    ctx.fillText("P1", p1.x + 5, p1.y, 20);
                    ctx.fillText("P2", p2.x + 5, p2.y, 20);

                    // Se dibuja el método arcTo con los puntos definidos...
                    ctx.beginPath();
                    ctx.strokeStyle="#FF0000";
                    ctx.lineWidth=3;
                    ctx.moveTo(p0.x,p0.y);
                    ctx.arcTo(p1.x,p1.y,p2.x,p2.y,radio);
                    ctx.stroke();
                }
            </script> 
        </div>
    </body>
</html>
